<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>宁波设计创意广告大赛</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="${pageContext.request.contextPath}/js/jquery-1.11.2.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<style type="text/css">
body {
	font-family: "微软雅黑", "Lucida Grande", Tahoma;
}

ul {
	list-style: none;
}

.header {
	position: fixed;
	top: 0px;
	left: 0px;
	opacity: 0.9;
	width: 100%;
	height: 50px;
	background-color: rgb(249, 249, 249);
	z-index: 1;
}

.header-left li {
	float: left;
	height: 50px;
	line-height: 50px;
}
.header-right li{
	float: right;
	height: 50px;
	line-height: 30px;
	margin-right: 25px;
}

.ds-flow {
	text-align: center;
}

。flow-box {
	text-align: center;
}

.ds-flow a {
	float: left;
	display: block;
	text-decoration: none;
	display: block;
}

.flow-img {
	width: 165px;
	height: 165px;
}

.fl-list {
	text-align: center;
}

.fl-list li {
	float: left;
	list-style: none;
}

.title {
	margin-bottom: 30px;
}

.title-des {
	position: absolute;
	width: 170px;
	height: 40px;
	top: 35px;
	background-color: white;
	left: 43%;
	font-size: 20px;
	font-weight: bold;
	color: #00ccff
}
</style>
</head>
<body>
	<div class="header">
		<ul class="header-left">
			<li><img alt=""
				src="${pageContext.request.contextPath}/imgs/logo.png" /></li>
			<li><label
				style="font-size: 27px; font-weight: bold; color: #666666;">宁波设计创意广告大赛</label>
			</li>
		</ul>
		<ul class="header-right">
			<li><a href="javascript:void(0)"
				style="color: #00ccff; font-size: 16px;">登录</a></li>
			<li><a href="javascript:void(0)"
				style="color: #00ccff; font-size: 16px;">注册</a></li>
		</ul>
	</div>
	<div class="container-fluid">

		<div class="row">
			<div id="myCarousel" class="carousel slide" data-ride="carousel">
				<!-- Indicators -->
				<ol class="carousel-indicators">
					<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
					<li data-target="#myCarousel" data-slide-to="1"></li>
					<li data-target="#myCarousel" data-slide-to="2"></li>
				</ol>
				<div class="carousel-inner" role="listbox">
					<div class="item active">
						<img class="first-slide"
							src="${pageContext.request.contextPath}/imgs/1.png"
							alt="First slide">
					</div>
					<div class="item">
						<img class="second-slide"
							src="${pageContext.request.contextPath}/imgs/1.png"
							alt="Second slide">
					</div>
					<div class="item">
						<img class="third-slide"
							src="${pageContext.request.contextPath}/imgs/1.png"
							alt="Third slide">
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="row title">
			<div class="col-xs-12"
				style="border-bottom: 1px solid #00ccff; height: 50px; text-align: center;">
				<div class="title-des">大赛流程</div>
			</div>
		</div>
		<div class="row" style="margin-left: 10px;">
			<div class="col-xs-3">
				<a href="javascript:void(0)"> <img class="flow-img" alt=""
					src="${pageContext.request.contextPath}/imgs/zc-1.png" />
				</a> <img class="" alt=""
					style="position: absolute; left: 170px; top: 70px;"
					src="${pageContext.request.contextPath}/imgs/splitline-1.png" />
			</div>
			<div class="col-xs-3">
				<a href="javascript:void(0)"> <img class="flow-img" alt=""
					src="${pageContext.request.contextPath}/imgs/tjzp-2.png" />
				</a> <img class="" alt=""
					style="position: absolute; left: 170px; top: 70px;"
					src="${pageContext.request.contextPath}/imgs/splitline-2.png" />
			</div>
			<div class="col-xs-3">
				<a href="javascript:void(0)"> <img class="flow-img" alt=""
					src="${pageContext.request.contextPath}/imgs/zjps-3.png">

				</a> <img class="" alt=""
					style="position: absolute; left: 170px; top: 70px;"
					src="${pageContext.request.contextPath}/imgs/splitline-3.png" />
			</div>
			<div class="col-xs-3">
				<a href="javascript:void(0)"> <img class="flow-img" alt=""
					src="${pageContext.request.contextPath}/imgs/fbjg-4.png">
				</a>
			</div>
		</div>
	</div>

</body>
</html>